<template>
  <div class="slider-show" v-if="images.length">
    <el-carousel
      :interval="4000"
      arrow="never"
      :height="swiperHeight + 'px'"
      :pause-on-hover="false"
      trigger="click"
    >
      <el-carousel-item v-for="item in images" :key="item">
        <img :src="item" class="image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import { windowHeight } from "../../config/index";
import getSomeImage from "../../utils/getSomeImage";
// 页面数据
const store = useStore();
const images = ref([]);
const swiperHeight = ref(0);
// 事件监听
// 监听window窗口的变化
window.onresize = () => {
  swiperHeight.value = windowHeight();
};

// 网络请求
const storeHomePageImages = store.state.image.homePageImages;
if (storeHomePageImages.length) {
  images.value = storeHomePageImages;
} else {
  getSomeImage(3).then((res) => {
    images.value = res;
    store.commit("image/getHomePageImagesMutations", res);
  })
}

// 生命周期
onMounted(() => {
  swiperHeight.value = windowHeight();
});
</script>

<style scoped>
.image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
</style>
